<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Card, Row, Col, Spin } from 'ant-design-vue'
import {
  TeamOutlined,
  FileOutlined,
  CheckCircleOutlined,
  PercentageOutlined, LineChartOutlined
} from '@ant-design/icons-vue'
import { getAdminStatistics } from '@/api/modules/statistics'
import type { AdminStatisticsVO } from '@/types/statistics'
import StatisticCard from './StatisticCard.vue'
import SubmitRateChart from './SubmitRateChart.vue'
import TrendChart from './TrendChart.vue'

const statistics = ref<AdminStatisticsVO>()
const loading = ref(false)

const fetchStatistics = async () => {
  loading.value = true
  try {
    statistics.value = await getAdminStatistics()
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchStatistics()
})
</script>

<template>
  <div class="admin-dashboard">
    <Spin :spinning="loading">
      <!-- 总览卡片 -->
      <Row :gutter="[16, 16]">
        <Col :span="6">
          <StatisticCard
            title="总任务数"
            :value="statistics?.overview.totalTasks || 0"
            :icon="FileOutlined"
          />
        </Col>
        <Col :span="6">
          <StatisticCard
            title="总提交数"
            :value="statistics?.overview.totalSubmissions || 0"
            :icon="CheckCircleOutlined"
          />
        </Col>
        <Col :span="6">
          <StatisticCard
            title="总学生数"
            :value="statistics?.overview.totalStudents || 0"
            :icon="TeamOutlined"
          />
        </Col>
        <Col :span="6">
          <StatisticCard
            title="平均提交率"
            :value="(statistics?.overview.averageSubmitRate || 0) * 100"
            suffix="%"
            :precision="2"
            :icon="LineChartOutlined"
          />
        </Col>
      </Row>

      <!-- 图表 -->
      <Row :gutter="[16, 16]" class="mt-4">
        <Col :span="12">
          <Card title="提交率排名">
            <SubmitRateChart :data="statistics?.submitRateRanking" />
          </Card>
        </Col>
        <Col :span="12">
          <Card title="近期提交趋势">
            <TrendChart :data="statistics?.submitTrend" />
          </Card>
        </Col>
      </Row>
    </Spin>
  </div>
</template>

<style lang="less" scoped>
.admin-dashboard {
  :deep(.ant-card) {
    height: 100%;
  }
}

.mt-4 {
  margin-top: 16px;
}
</style> 